---
title: Create OAuth Client
excerpt: Setup an OAuth client to be used for authenticated content.
weight: 110
group: Draft Mode
---

Before we can create an OAuth consumer, we need to create a new role and a user for OAuth scopes.

<Callout>

As from `next-drupal 1.5`, user roles are used for OAuth scopes. The scopes are automatically handled for the preview based on the currently logged in user.

The OAuth related instructions below are based on the 6.x version of the Simple OAuth module.

</Callout>

---

## 1. Create Role

1. Visit `/admin/people/roles`.
2. Click on **+ Add role**.
3. Fill in the **Role name**. Example: _Next.js Site_.

---

## 2. Assign Permissions

Next, assign the following permissions to the newly created role.

- Bypass content access control
- Issue subrequests
- View user information
- View all revisions

<Callout>

We are assigning the _Bypass content access control_ permission to allow Next.js to access unpublished content and revisions.

This scope is only going to be used when making authenticated requests from Next.js to Drupal.

```ts
const article = await drupal.getResource(
  "node--article",
  "dad82fe9-f2b7-463e-8c5f-02f73018d6cb",
  // highlight-start
  {
    withAuth: true,
  }
  // highlight-end
)
```

</Callout>

---

## 3. Create User

Add a new user at `/admin/people/create` and **assign them all the roles that are going to be used for scopes, including the role we created above**.

---

## 4. Generate keys

Generate a pair of keys to encrypt the tokens. Store them outside of your document root (`web` directory) for security.

1. Visit `/admin/config/people/simple_oauth`
2. Click **Generate keys** to generate encryption keys for tokens
3. Fill in **Directory for the keys**. For example a relative path like `../`
4. Click **Generate**
5. Click **Save configuration**

You can also use `openssl` to generate keys in the directory you used above:

```
openssl genrsa -out private.key 2048
openssl rsa -in private.key -pubout > public.key
```

---

## 5. Create Scope

1. Visit _/admin/config/people/simple_oauth/oauth2_scope/dynamic/add_
2. Fill in the following values:

- **Machine-readable Name**: `nextjs_site`
- **Description**: `Next.js Site`
- **Grant Types**: `Client Credentials`
- **Granularity**: `Role`
- **Role**: `Next.js Site`

3. Click **Save**

---

## 6. Create Consumer

1. Visit _/admin/config/services/consumer/add_
2. Fill in the following values:

- **Label**: `Next.js site`
- **Client ID**: `nextjs_site` (or generate a UUID if preferred)
- **Secret**: `Your secret`
- **Grant Types**: `Client Credentials`
- **Scopes**: `nextjs_site`
- **User**: `Select the user we created`

3. Click **Save**

_Important: note the client id (uuid) and the secret. These are going to be used as environment variables for the Next.js site._

---

## 7. Connect Drupal

To connect the Next.js project to Drupal, we use [environment variables](https://nextjs.org/docs/basic-features/environment-variables).

Fill in the following variables in your `.env.local` file.

```txt title=.env.local
# Authentication (Bearer)
DRUPAL_CLIENT_ID=
DRUPAL_CLIENT_SECRET=
```

---

## 8. Update NextDrupal client.

Update the `NextDrupal` client to use the **Bearer** authentication header.

```ts title=lib/drupal.ts
import { NextDrupal } from "next-drupal"

const baseUrl = process.env.NEXT_PUBLIC_DRUPAL_BASE_URL as string
const clientId = process.env.DRUPAL_CLIENT_ID as string
const clientSecret = process.env.DRUPAL_CLIENT_SECRET as string

export const drupal = new NextDrupal(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  auth: {
    clientId,
    clientSecret,
  },
  withAuth: true,
})
```
